<!DOCTYPE html>
<html>

<head>
    <title>Example</title>
    <meta charset="utf-8">
    <meta name="author" content="Adam Freeman">
    <meta name="description" content="A simple example">
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <style type="text/css" media="screen">
    body {
        counter-reset: OuterItemCount 5 InnerItemCount;
    }
    
    #outerlist > li:before {
        content: counter(OuterItemCount) ". ";
        counter-increment: OuterItemCount 2;
    }
    
    ul.innerlist>li:before {
        content: counter(InnerItemCount, lower-alpha) ". ";
        counter-increment: InnerItemCount;
    }
    </style>
</head>

<body>
    I like apples and oranges. I also like:
    <ul id="outerlist" style="list-style-type: none;">
        <li>bananas</li>
        <li>mangoes, including: </li>
        <ul class="innerlist">
            <li>Haden mangoes</li>
            <li>Keitt mangoes</li>
            <li>Kent mangoes</li>
        </ul>
        <li>cherries</li>
        <li>plums, including:
            <ul class="innerlist">
                <li>Elephant Heart plums</li>
                <li>Stanley plums</li>
                <li>Seneca plums</li>
            </ul>
        </li>
        <li>peaches</li>
        <li>grapes</li>
    </ul>
    You can see other fruitsm I like <a href="fruitlist.html">here</a>.
</body>

</html>
